<template>
  <div style="height: 100% !important">
    <!-- <el-row justify="end">
      <el-button size="small" type="success">控件列表</el-button>
    </el-row> -->
    <el-input v-model="searchFiledName" placeholder="请输入字段名称" prefix-icon="Search" @input="searchTree"
      clearable></el-input>
    <el-scrollbar ref="scrollbarRef" :height="height">
      <el-tree v-loading="treeLoadingStatus" :data="treeData" ref="treeRef" :props="defaultProps" default-expand-all
        :highlight-current="true" node-key="componentId">
        <template v-slot:default="{ node, data }">
          <element-tree-line :node="node" showLabelLine>
            <!-- 自定义label的slot -->
            <template v-slot:node-label>
              <span style="
                  font-size: 12px;
                  user-select: none;
                  display: flex;
                  align-items: center;
                ">
                <!-- <svg-icon :icon-class="'field'" style="height: 30px;width: 16px;" /> -->

                <template v-if="node.isLeaf == true">
                  <template v-if="data.status == 0">
                    <i class="iconfont icon-wenjian"></i>
                  </template>
                  <template v-else>
                    <i class="iconfont icon-ziduan"></i>
                  </template>
                </template>
                <template v-else-if="node.expanded == true">
                  <i class="el-icon open"></i>
                </template>
                <template v-else-if="node.expanded == false">
                  <i class="el-icon unOpen"></i>
                </template>
                <span class="hover-label" @dblclick.stop="handleClickControlType(data)">
                  {{ node.label }}
                </span>
              </span>
            </template>
          </element-tree-line>
        </template>
      </el-tree>
      <div style="height: 20px"></div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import "@/assets/iconfont/iconfont.css";
import bus from "@/utils/eventBus";
import { dataCollectionTree } from "@/api/templateEditor/table.js";
import { nextTick } from "vue";
const { proxy } = getCurrentInstance();
const route = useRoute();
const diyList = ref([
  { diyName: "单行文本" },
  { diyName: "多行文本" },
  { diyName: "单选框" },
  { diyName: "复选框" },
  { diyName: "日期" },
  { diyName: "下拉框" },
  { diyName: "标签" },
  { diyName: "图片" },
]);
const searchFiledName = ref();
const regularList = ref([
  {
    title: "单行文本型：",
    content: [{ regularName: "环境湿度", regularId: 123456 }],
  },
  {
    title: "多行文本型：",
    content: [{ regularName: "前处理过程", regularId: 123456 }],
  },
]);
const treeLoadingStatus = ref(false);
const treeData = ref([]);
const oldTreeData = ref([]);
const defaultProps = readonly({
  children: "children",
  label: "componentName",
});

function handleClickControlType(data) {
  if (!data.status || data.status != 1) return;
  bus.emit("handleField", data);
}
const height = ref();

function getHeight() {
  height.value = proxy.getSubFileHeight(proxy, "scrollbarRef");
}
function getDataCollectionTree() {
  treeLoadingStatus.value = true;
  let getModelType = {};
  bus.emit("getTableData", getModelType);
  nextTick(() => {
    dataCollectionTree(getModelType.modelType)
      .then((response) => {
        bus.emit("oldTree", response.data);
        oldTreeData.value = response.data;
        let res = response.data.filter((item) => {
          return !item.isHide;
        });
        treeData.value = proxy.handleTree(res, "componentId");
        treeLoadingStatus.value = false;
      })
      .catch((err) => (treeLoadingStatus.value = false));
  })
}

function searchTree() {
  if (searchFiledName.value) {
    let temp = []
    oldTreeData.value.forEach((item) => {
      if (item.status == "1") {
        if (item.componentName.includes(searchFiledName.value)) {
          temp.push(item)
        }
      }
    })
    treeData.value = proxy.handleTree(temp, "componentId")
  } else {
    treeData.value = proxy.handleTree(oldTreeData.value, "componentId")
  }
}

// 选中后的颜色
bus.off("selectedColor")
bus.on("selectedColor", (val) => {
  let tree = proxy.$refs["treeRef"];
  tree.setCurrentKey();
  for (let item of oldTreeData.value) {
    if (item.componentId == val) {
      let scroll = proxy.$refs["scrollbarRef"];
      scroll.scrollTo(0, 0);
      tree.setCurrentNode(item);
      nextTick(() => {
        let $isCurrent = $(".is-current");
        let offsets = $isCurrent.offset();
        scroll.scrollTo(
          0,
          offsets.top > height.value.split("p")[0]
            ? offsets.top - height.value.split("p")[0] - 50
            : 0
        );
      });
    }
  }
});

getDataCollectionTree();
onMounted(() => {
  nextTick(() => {
    getHeight();
    window.addEventListener("resize", getHeight);
  })
})
onUpdated(() => {
  nextTick(() => {
    getHeight();
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>

<style lang="scss">
.mutipleFormsClass {
  margin-bottom: 10px;
  padding: 10px 10px 0 10px;
  border: 1px solid;
  border-radius: 15px;
}

.mutipleColsClass {
  font-size: 14px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border: 1px dashed;
  margin-bottom: 10px;
  background-color: #d9d9d9;
}

$--element-tree-line-color: #000;

span.icon {
  // border: 1px solid #606266;
  padding: 0px;
  display: inline-flex;
  align-items: center;
  width: 18px;
  height: 18px;
  justify-content: center;
  margin-left: 8px;

  &:hover i {
    color: #409eff;
  }

  >i {
    color: #606266;
    font-size: 18px;
  }
}

:deep(.el-icon) {

  .el-tree-node__expand-icon,
  .expanded {
    font-family: "iconfont" !important;
    font-size: 16px;
    color: #000 !important;
    position: absolute;
    right: calc(-100% - 10px);
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    >svg {
      display: none !important;
    }
  }
}

:deep(.el-tree-node__expand-icon),
:deep(.expanded),
:deep(.is-leaf) {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: rotate(0) !important;
  color: #606266;
  display: none;
}

:deep(.el-tree-node__expand-icon)::after {
  content: "\e676";
}

:deep(.expanded)::after {
  content: "\e677";
}

:deep(.element-tree-node-line-hor) {
  z-index: -1 !important;
}

.open,
.unOpen,
file-leaf {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: rotate(0) !important;
  color: #606266;
  margin-right: 10px;
}

.iconfont {
  margin-right: 10px;
}

.open::after {
  content: "\e677";
}

.unOpen::after {
  content: "\e676";
}

.file-leaf::after {
  content: "\e61d";
}

:deep(.el-scrollbar__wrap) {
  margin-bottom: -10px;
  margin-right: -10px;
  border: 1px solid #606060;
}

span.hover-label:hover {
  text-decoration: underline;
}
</style>
